<template>
    <view class="bill-list">
        <view class="date-item" v-for="item in billList" :key="item.date">
            <view class="date-item-title">
                <view class="date-item-title-date">{{ item.dateShow }}</view>
                <view class="date-item-title-total" :style="getCountColorStyle(item.total)">{{ item.total }}</view>
            </view>
            <view class="date-item-bills">
                <view class="bill-item white-block" v-for="bill in item.bills" :key="bill.id">
                    <view class="bill-item-top">
                        <view class="bill-item-labels">{{ bill.labels.join(',') }}</view>
                        <view class="bill-item-count" :style="getCountColorStyle(bill.count)">{{ bill.count }}</view>
                    </view>
                    <view v-if="bill.comment" class="bill-item-bottom">
                        {{ bill.comment }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import { formatDate } from '@/utils/time-utils.js'
const props = defineProps({
    billList: {
        type: Array,
        default: () => []
    }
})

const billList = computed(()=>{
    let list = []
    props.billList.forEach(bill => {
        bill = JSON.parse(JSON.stringify(bill))
        const fullDate = formatDate(bill.date)
        const date = fullDate.split(' ')[0]
        const dateIndex = list.findIndex(dateItem => dateItem.dateShow === date)
        const count = {
            expenditure: -Number(bill.count),
            income: Number(bill.count)
        }[bill.type]
        console.log(bill.type, count)
        if (dateIndex > -1) {
            bill.count = count
            list[dateIndex].bills.push(bill)
            list[dateIndex].total += count
        } else {
            bill.count = count
            list.push({
                date: bill.date,
                dateShow: date,
                total: count,
                bills: [bill]
            })
        }
    });
    console.log(list)
    return list
})
const getCountColorStyle = (num) => {
    return num > 0 ? 'color: #00CC99;' : 'color: #FF6B6B;';
}
</script>

<style lang="less" scoped>
.bill-list {
    width: 690rpx;
    margin: 0 auto;
    .date-item {
        margin-top: 40rpx;
        .date-item-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 28rpx;
            color: #666666;
        }
        .date-item-bills {
            .bill-item {
                margin-top: 20rpx;
                .bill-item-top {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .bill-item-labels {
                        font-size: 32rpx;
                        color: #333333;
                    }
                }
                .bill-item-bottom {
                    width: 600rpx;
                    font-size: 28rpx;
                    color: #999999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>